<link rel="stylesheet" href="/static/comp/swiper/swiper.min.css">

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js" ></script>
<script src="/static/comp/swiper/swiper.min.js" ></script>
<script src="/static/comp/clipboard/clipboard.min.js" ></script>

<style>
    body {
      background: black;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
      padding-top: 50px;
    }
    .swiper-slide {
      background-position: center;
      background-size: cover;
      width: 300px;
      height: 400px;
    }

    .share_box{
        background-color: white;
        position:absolute;
        bottom:0; 
        left:0; 
        width: 100%; 
        height: 0px; 
        padding:10px 10px; 
        border:1px solid #ddd;
        border-top-left-radius:20px;
        border-top-right-radius:20px;
        display: none;
    }
    .share_icon{
        width: 40px;
        height: 40px;
    }
    .layui-m-layercont{
        padding: 0 0 !important;
    }
 
    .crh_share_text_word {
        font-size: 14px;
        width: 80%;
    }
    .crh_share_text_copy{
        width: 10%;
        min-width: 50px;
        background-color: tomato;
        color: white;
        text-align: center;
    }
    .crh_share_text_word p{
        padding: 4 4;
        margin: 0;
        text-align: left;
    }
  </style>

<button class="btn btn-primary m-2" onclick="showShare();">点击分享</button>

<!--图片滑动控件-万勿删除-->
 <div class="swiper-container">
    <div id="crh-swiper" class="swiper-wrapper">
    </div>
 </div>

<!--分享层-->
<div class="share_box">
    <div class="row">
        <div class="col-10 font-weight-bold">截图分享到</div>
        <div class="col-2 float-right text-center text-secondary" style="font-size: 30px; line-height: 16px;">
        <a href="javascript:;" onclick="closerShare();">&times;</a>
        </div>
    </div>
    <div class="row mt-4">
        <div class="col-3 text-center">
            <img src="/static/img/shared/wechat.svg" class="share_icon">
            <p>微信好友</p>
        </div>
        <div class="col-3 text-center" onclick="shareText();">
            <img src="/static/img/shared/copy.svg" class="share_icon">
            <p>文字分享</p>
        </div>
        <div class="col-3 text-center">
            <img src="/static/img/shared/wechat_moments.svg" class="share_icon">
            <p>朋友圈</p>
        </div>
        <div class="col-3 text-center" onclick="savePicture();">
            <img src="/static/img/shared/download.svg" class="share_icon">
            <p>保存图片</p>
        </div>
    </div>
</div>

  <script>   
        var g_crh_current_picture = "/static/img/banner001.jpg";
        function initSwiper(){
            var arrPictures = [
                "/static/img/banner001.jpg",
                "/static/img/banner002.jpg",
                "/static/img/banner003.jpg",
                "/static/img/banner004.jpg",
                "/static/img/banner005.jpg",
            ];
            var arrDivPic = [];
            for(var i=0; i<arrPictures.length; i++){
                var pic = arrPictures[i];
                var img = "<img src='"+ pic +"' class='swiper-slide rounded-lg' />"
                arrDivPic.push(img);
            }
            $("#crh-swiper").html(arrDivPic.join(""));

            var swiper = new Swiper('.swiper-container', {
                effect: 'coverflow',
                grabCursor: true,
                centeredSlides: true,
                slidesPerView: 'auto',
                coverflowEffect: {
                    rotate: 50,
                    stretch: 0,
                    depth: 100,
                    modifier: 1,
                    slideShadows : true,
                },
                on:{
                    slideChange: function(){
                        var picurl = arrPictures[this.activeIndex];
                        g_crh_current_picture = picurl;
                    },
                },
            });
        }

        initSwiper();
        $(function(){
            var config = {{.wxconf}};
            var siteurl = '{{.SiteUrl}}';
            wx.config({
                debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: config.appid, // 必填，公众号的唯一标识
                timestamp: config.timestamp, // 必填，生成签名的时间戳
                nonceStr: config.nonceStr, // 必填，生成签名的随机串
                signature: config.signature,// 必填，签名
                jsApiList: ["updateAppMessageShareData"] // 必填，需要使用的JS接口列表
            });

            wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
                wx.updateAppMessageShareData({ 
                    title: '测试', // 分享标题
                    desc: '测试分享描述', // 分享描述
                    link: siteurl+"/wx", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: '', // 分享图标
                    success: function () {
                        // 设置成功
                    }
                })
            });

            // 复制
            function initCopyFn(){
                var clipboard = new ClipboardJS('.crh_share_text_copy');
                clipboard.on('success', function(e) {
                    layer.open({
                        content: '复制成功'
                        ,skin: 'msg'
                        ,time: 2
                    });
                    e.clearSelection();
                });

                clipboard.on('error', function(e) {
                    layer.open({
                        content: '复制失败'
                        ,skin: 'msg'
                        ,time: 2
                    });
                });
            }

            
            initCopyFn();
        });

        function showShare(){
            $(".share_box").animate({
                opacity:'1',
                height:'130px',
                zIndex: 9,
            }).show();
        }

        function closerShare(){
            $(".share_box").animate({
                opacity:'1',
                height:'0px',
                bottom: '-50'
            }, function(){
                $(".share_box").hide();
            });
        }

        function savePicture(){
            // alert(g_crh_current_picture);
            layer.open({
                content: '请长按图片，保存到相册'
                ,skin: 'msg'
                ,time: 2
            });
        }

        function shareText(){
            layer.open({
                content: ['<table>\
                <tr><td class="crh_share_text_word">\
                    <p>我自己用了下这个感觉蛮好分享给你，有时间你也去看看</p>\
                    <p>【无感内衣 打折 8.99 元全国包邮】</p>\
                    <p>他的购买链接</p>\
                    <p>http://www.aaa.com/111asd/asd</p>\
                </td>\
                <td class="crh_share_text_copy" data-clipboard-target=".crh_share_text_word">点<br/>击<br/>复<br/>制</div>\
                </td></tr>\
                </table>\
                '
                ]
            });
        }
</script>